
<template>

  <van-sticky>
      <van-nav-bar
        title="邮箱验证"
        left-text="返回"
        left-arrow
        @click-left="onBack"
      />
  </van-sticky>


  <van-form @submit="onSubmit">
  <van-cell-group inset>
      <van-field
        v-model="business.email"
        name="email"
        label="邮箱"
        placeholder="邮箱"
        :rules="[{ required: true, message: '请填写邮箱' }]"
      />
  </van-cell-group>
  <van-cell-group inset>
    <van-field
      v-model="sms"
      center
      clearable
      label="验证码"
      placeholder="请输入验证码"  
    >
    
      <template #button>
        <van-button size="small" @click="send" type="primary" >{{ context }}
          <van-count-down 
          :time="time" 
          :hidden="Status  ? false : true"
          format="ss" 
          ref="Time"
          @finish="onFinish"
          />
          
        </van-button>
      </template>
    </van-field>
  </van-cell-group>

  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit">
      提交
    </van-button>
  </div>
</van-form>

</template>

<script setup>

  import { showSuccessToast } from 'vant';
  import { ref,getCurrentInstance } from 'vue';
  const time = ref(30*1000);

  const { proxy } = getCurrentInstance();

  const business = ref(proxy.$business);
  const Status = ref('');
  const Time = ref('');
  const context = ref('发送验证码');

  const send = () => {
    showSuccessToast('发送验证码成功');
    context.value = null;
    Status.value = true;
    Time.value.start();
    Time.value.reset();

  }
  const onFinish = () =>{
    context.value = '重新发送验证码';
    Status.value = false;
    Time.value.reset();
  }

  // 表单提交事件
  const onSubmit = async (values) => {
    let data = {
        email:values.email,
        
    }
  }
  // 返回上一级
  const onBack = () => {
      proxy.$router.back();
  };
  
</script>